<%--
  Created by IntelliJ IDEA.
  User: WangXin
  Date: 2020/1/14
  Time: 20:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>下单页</title>
    <%-- 引用layui.css --%>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath %>css/common.css"/>
    <script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/common/jquery-1.11.3.js"></script>
</head>

<body style="align-content: center">
<%-- 下单详情信息 --%>

<div id="returnDetail">
    <section class="panel panel-padding ">
        <form class="layui-form" action="" style="margin:40px;" name="my_form" id="my_form">
            <input type="hidden" id="goods_id" name="goods_id" value="">
            <input type="hidden" id="goods_type" name="goods_type" value="">
            <input type="hidden" id="goods_storage" name="goods_storage" value="" title="库存">
            <input type="hidden" id="goodsCommonId" name="goodsCommonId" value="">
            <input type="hidden" id="goodsExchIntegral" name="goodsExchIntegral" value="">
            <input type="hidden" id="common_price" name="common_price" value="">
            <input type="hidden" id="shipping_fee" name="shipping_fee" value="" title="运费(积分)">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">共需价钱：</label>
                <div class="layui-input-block">
                    <input type="text" id="exchIntegralAmount" name="exchIntegralAmount" value="0" readonly
                           class="layui-input"
                           style="border: none;outline: none;height: 32px;font-size: 34px;color: #3FDD86">
                </div>
            </div>
            <hr>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品名称：</label>
                <div class="layui-input-block">
                    <input type="text" id="goodsName" name="goodsName" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品规格：</label>
                <div class="layui-input-block">
                    <input type="text" id="specifications" name="specifications" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品价格(￥)：</label>
                <div class="layui-input-block">
                    <input type="text" id="price" name="price" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品运费(￥)：</label>
                <div class="layui-input-block">
                    <input type="text" id="shippingFee" name="shippingFee" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品品牌 （供应商)：</label>
                <div class="layui-input-block">
                    <input type="text" id="brandName" name="brandName" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">是否可以积分购买：</label>
                <div class="layui-input-block">
                    <input type="text" id="isInteBuy" name="isInteBuy" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">赠送积分：</label>
                <div class="layui-input-block">
                    <input type="text" id="sendInte" name="sendInte" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">购买数量：</label>
                <div class="layui-input-block">
                    <input type="text" id="number" name="number" value="" class="layui-input" placeholder="请输入购买数量"
                           lay-verify="required">
                </div>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">商品属性：</label>
                <div class="layui-input-block">
                    <input type="text" id="goodsType" name="goodsType" readonly class="layui-input">
                </div>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">配送方式：</label>
                <div class="layui-input-block" style="width:150px">
                    <select name="getWaySelect" id="getWaySelect" lay-verify="required" lay-filter="selFilter">
                        <option value="">请选择</option>
                        <option value="1">自提</option>
                        <option value="0">配送</option>
                    </select>
                </div>
            </div>
        </form>
    </section>
</div>

<script type="text/javascript">
    layui.config({
        base: "<%=basePath%>/js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;

        layui.common.init();

        var goodsId = $('#goods_id').val();
        var goodsType=$('#goods_type').val();
        var goodsStorage = $('#goods_storage').val();
        var price =$('#common_price').val();//商品价格
        var shippingFee =parseInt($('#shipping_fee').val());//运费


        $("#number").on("input", function (e) {
            //获取input输入的值
            // console.log(e.delegateTarget.value);
            var number = parseInt(e.delegateTarget.value);
            var count2 = number * price;
            if (number == '' || $('#number').val() == '') {
                $('#number').focus();
                $('#exchIntegralAmount').val('0')
            } else if (!(/(^[1-9]\d*$)/.test(number))) {
                $('#number').val("");
                $('#exchIntegralAmount').val('0')
                layer.msg("数量应为正整数！", {icon: 5, time: 2000});
            } else {
                var selectValue = $('#getWaySelect').val();
                if (selectValue == '0') { //配送
                    $('#exchIntegralAmount').attr('value', count2 +shippingFee)
                } else if (selectValue == '1' || selectValue == '') {//自取
                    $('#exchIntegralAmount').val(count2);
                }
            }
            //库存校验
            if (parseInt(number) > parseInt(goodsStorage)) {
                layer.msg("超过库存：" + goodsStorage, {icon: 5, time: 2000});
                $('#number').val("");
                $('#exchIntegralAmount').attr("value", 0)
            }
        });


        //配送方式选择
        //layui下拉列表的事件不能用jq的change 应该用自带的方式写
        //form.render('select');渲染一下 不然你的操作还是不生效  select不是选择器 表示渲染下拉列表 不写表示所有表单都渲染

        form.on('select(selFilter)', function (data) {
            var selectValue = data.value;
            //console.log(selectValue)

            if ($('#number').val() == '') {
                $('#number').focus();
                $('#getWaySelect').val("1");
                $('#exchIntegralAmount').attr("value", 0);
                layer.msg("请先输入购买数量后，重新选择" , {icon: 5, time: 2000});
                form.render('select');
            } else {
                $("#number").on("input", function (e) {
                    var number = parseInt(e.delegateTarget.value);
                    if (selectValue == '0') { //配送
                        $('#exchIntegralAmount').val((number * price) + shippingFee)
                    } else if (selectValue == '1' || selectValue == '') {//自取
                        $('#exchIntegralAmount').val(number * price);
                    }
                });

                if (selectValue == '0') { //配送
                    $('#exchIntegralAmount').val((parseInt($('#number').val()) * price) + shippingFee)
                } else if (selectValue == '1' || selectValue == '') {//自取
                    $('#exchIntegralAmount').val(parseInt($('#number').val()) * price);
                }
                form.render('select');
            }
        });

        //页面一加载就发送ajax
        $(function () {
          
            $.ajax({
                url: "<%=basePath%>xzxd/toBuyDetail.do",
                type: "post",
                data: {
                goodsId: goodsId,
                goodsType: goodsType          
                },
                datType: "json",
                success: function (data) {
                    if (data.statusCode == '200') {
                        var obj = data.model[0];
                        //console.log(data.model[0])
                        $('#goodsName').val(obj.goodsName);
                        $('#brandName').val(obj.brandName);
                        //$('#exchInte').val(obj.exchInte);
                        $('#goodsCommonId').val(obj.goodsCommonId);
                        //$('#goodsStatus').val(obj.goodsStatus);
                        $('#goodsType').val(obj.goodsType);
                        $('#isInteBuy').val(obj.isInteBuy);
                        //$('#isNormal').val(obj.isNormal);
                        $('#price').val(obj.price);
                        $('#sendInte').val(obj.sendInte);
                        $('#shippingFee').val(obj.shippingFee);
                        $('#specifications').val(obj.specifications);
                    } else {
                        layer.msg(data.message, {icon: 5, time: 2000});
                    }
                }
            });
        });
    });

</script>
</body>
</html>

